【译】Flutter vs. React Native: 2023年哪个更好？

原文链接：www.sam-solutions.com/blog/flutte…

原作者：Natallia Sakovich

更新时间：2023年7月14日

        2023年高效快速的跨平台应用开发方式是什么？我们比较了两种技术——Flutter和React Native，以便于你知道哪个平台框架更适合你的应用。

        移动应用程序业务正在稳步增长。如今几乎每个人都有一部智能手机，所以潜在的客户数量几乎是无限的。这就是为什么现在每家公司都在努力制作移动应用程序，以便在自己的细分市场中保持竞争力。

        设计并构建应用程序有许多方式。你可以使用原生的方法，例如使用不同的语言（Android的Java和Kotlin，iOS的Swift和Object-C）去为每个平台开发各自的应用。但是也有一种跨平台的开发方式，即软件工程师编写一套代码就可以运行在所有移动设备上。为了实现这个目标，市场上有许多专门的框架，如今最受欢迎的就是Flutter和React Native。

        Flutter在过去几年再开发者中十分受欢迎，并在2021年 Statista排名中名列榜首，React Native则紧随其后排在第二位。

我们会在本文中讨论Flutter和React Native的功能，以及他们的优缺点。

        Flutter是谷歌推出的一个相当年轻（2017年推出）的SDK。这是一个开源免费的工具，开发者使用一套代码就可以开发跨平台的移动应用，同时也可以用于开发网站、桌面端以及嵌入式设备。使用 Flutter，你可以开发 MVP 和全功能产品。

        Flutter本身是用C/C++和Dart写的，但是它使用Dart进行App开发。

        对于开发Android和iOS应用而言，Dart目前是最快的编程语言。它可以帮助你创建功能完善的UI组件，并有着良好的IDE支持，如代码补全等。同时他还允许热更新且使用面向对象编程。通过它，你可以创建灵活而富有表现力的用户界面，并在本地运行。

        组成Flutter的两部分：

SDK，一个包含一系列开发、调试、性能分析等功能的工具

框架本身，他是一个基于widget的用户界面库。它包含button、text与sliders等，同时你也可以自定义一些组件。

        使用Flutter开发的App基于一套代码，并且Dart语言会被编译成本机代码——这也提高了应用的性能。这些App使用图形处理单元（GPU）去渲染界面，并调用相应平台的API和服务（相机、本地存储等）。

        一个现代的移动引用程序应具备精美的设计、流畅的动画以及出色的性能。为了实现这一目标，开发者必须在不牺牲性能和质量的前提下快速地开发新功能。这也是Goole推出Flutter的原因。当Flutter首次亮相时，开发者就惊艳于它相比其他跨平台App在移动设备上的优异表现。

开发快速：借助Flutter，你可以快速开发原型甚至是现成的应用程序。在Web端，Flutter也非常适合开发渐进式Web应用、单页应用和为已有的移动应用程序开发Web版本

热加载：这一特性确保了快速的编译和最大化的性能。你可以修改项目中的元素与Widget，他会在不影响应用状态的前提下更新应用的UI

完美的性能：基于Flutter的App运行非常快，可以达到60fps甚至更高

丰富的自定义Widget：Flutter提供了大量基于Materai Design（Goole风格）或Cupertino框架（Apple风格）的Widget，这是移动应用程序看起来非常漂亮

整合方便：Flutter可以和许多受欢迎的开发工具结合，如VScode、Android Studio和Scode，这意味着你可以使用你最喜欢的编辑器或IDE进行开发。同样的Flutter上的引用也可以狠容易地整合到Google设备上，因为Google就是框架的创建者

灵活且富有表现力的UI：Flutter提供了Widget、渲染、动画和手势，使你能完全控制屏幕上的每一个像素。这意味着你可以为你的应用程序创建原始的自定义设计

原生应用程序：使用Flutter开发的应用在Android和iOS上有一套通用的UI。所以你可以为两个平台开发一套高适配性的用户界面——在谷歌商店，他们看起来就像Material Design；在App Store则像Cupertino design

开源：因为Flutter时开源的，所以这个框架现有的解决方案一直在增加。你可以在你的项目中使用现成的解决方案，或者创建全新的内容，从而为Flutter项目的发展和改进做出贡献

学习简单：从零开始学习Flutter总共需要3-4个月。该平台基于Dart语言——一种与常用的C#、Java和Javascript语法相似的语言，这意味着对于新手或有经验的开发者来说学习非常简单

优秀的文档：Flutter和Dart都提供了详细的文档，这简化了它们的学习和实际使用过程

        Flutter对新手非常友好：如果你不了解移动开发流程，那就选择Flutter，因为他提供了一种快速、有趣和现代化的方式去构建本地移动应用。如果你是一个经验丰富的开发者，那么你可以尝试这个令人惊艳的开发工具。

新生项目：Flutter是一项年轻的技术，因此可能会涉及到错误、与更新相关的问题，以及其他年轻工具所具有的各种“美妙之处”。

Dart是一个小众的语言：为了开发Flutter，开发者不得不去花时间学习一门新语言与新的开发方式。因此Dart开发人员数量较少，难以找到合格的资深开发者

性能强劲的电脑：Dart会创建自己的虚拟机，这会消耗计算机资源。此外，模拟器和IDE也会消耗内存与处理器容量。因此如果你的电脑处理器较弱且内存低于8GB，那么开发Flutter会非常困难

        React Native是一个强大的免费且开源的框架。如今它是世界上最受欢迎的框架之一。如同Flutter一样，它支持一套代码运行在多个平台。它允许为iOS、Android、Windows和macOS开发跨平台应用

        因为React Native使用Javascript语言并且使用React库，所以开发者创建应用的Web版本非常容易，并且能够确保较快的开发时间与bug修复。

        需要注意的是虽然React Native使用React作为他的基础库，但是它并不是React的升级版本。

        React（又称Reactjs）是一个用于创建网站用户界的库，由Facebook工程师团队在2013年开发。React Native是一个由React支持的全功能框架，他发布于2015年（同样也是由Facebook工程师团队），它旨在使开发人员能够使用一套UI组件来快速编译和运行iOS和Android应用程序。

        在你决定开发React Native应用之前有一些React Native的短板你需要提前知道“

        一旦你选择使用Flutter去开发应用，你就需要去学习一门新的编程语言——Dart。Dart是一门相对来说非常年轻的语言（出现于2011年），由Google开发用于替换Javascript。这门语言有着优雅的面向对象的语法，文档完善，有上千个示例，所以切换到这门语言几乎很容易。

        React Native使用JavaScript这门成熟的语言，这门语言有着丰富的教程，在全世界有数百万的支持者。一方面JavaScript已经确立了自己的地位并在动态Web开发中扮演着关键角色。另一方面，得益于超前编译器和即时编译器，Dart 可以将 JavaScript 的性能提高一倍。

        至于速度，Flutter和Dart明显更快。但是如果你的主要考虑是成熟度和丰富的开发者，则应该选择React Native和Javascript。

        当选择跨平台移动应用开发环境时，我们首先要考虑的就是它的技术架构。知道框架的内部结构，你可以做出明智的决定，选择最适合你项目的产品。

        React Native的架构深受Javascript Bridge模式的影响，使用Javascript编写的代码在运行时会被编译成机器码。React Native使用由Facebook开发的Flux架构，因此，这个平台使用一个特殊的JavaScript Bridge来与自己的模块进行通信，这也使得应用程序略显缓慢。

        Flutter使用的Dart内置了大多数组件，因此他的体积比较大且不需要空间去与自己的模块交互。Dart有许多框架如Material Design和Cupertino，这为开发移动应用提供了许多必要的技术。与此同时，Dart使用了由C++编写的Skia图形引擎。综上所述，Flutter在引擎本身中拥有所有必要的核心组件，因此它的应用程序更快。

        React Native使用Node.js的NPM包管理器就可以安装，对于经验丰富的Javascript开发者来说，React Native的安装过程非常简单，其他开发者则需要学习基础的NPM包管理器的内容。

        Flutter从Github下载特定平台的二进制文件就可以安装，或者是从官网下载zip压缩包，之后你需要把bin文件夹添加到系统环境变量中。相比于React Native，Flutter的安装可能需要更多步骤。

        因此，无论是React Native还是Flutter，在其各自的操作系统特定软件包管理器中都无法进行一键式的安装。然而安装Flutter可能需要更多额外的步骤，因此它的安装过程可能会慢一点。

        React Native使用原生iOS和Android组件，并且为渲染用户界面和访问设备提供了API。为了访问大多数原生模块，React Native不得不依赖第三方库，所以他严重依赖第三方库。

        Flutter不使用原生UI元素，而是提供从头开始渲染的自定义Widget。使用Flutter进行UI开发涉及到与UI渲染组件、设备API访问、导航、测试、状态管理以及许多库进行连接，需要进行广泛的定制。丰富的组件使得Flutter不需要依赖第三方库，使用Flutter，你将拥有开发移动应用所需的一切。

        对于有Javascript开发经验的程序员来说使用React Native开发跨平台应用非常简单。此外，热加载功能在测试用户界面的更改时也节省了许多时间。至于IDE的支持，开发者可以使用任何文本编辑器或者是开发环境，这也有助于简化流程。

        虽然Flutter也有热加载的功能，然而随着应用复杂性的增加，开发者需要额外的时间去学习新的Flutter内容。更重要的是，Dart并不是一个常见的编程语言，许多文本剪辑器和IDE并不支持他，这可能会时开发流程变慢。

        尽管这两个框架都可以实现代码的重用，但Flutter在这方面提供了更多的机会。在Flutter中，你只需要更改一行，指定新的业务逻辑，然后重用代码库。在React Native中，由于代码并不兼容所有平台，所以并不能直接复用，开发者有时候需要寻找其他组件并调整代码库。

        React Native是一个Javascript框架并且Javascript本身提供了许多单元测试框架。然而，就集成或在UI层面进行测试而言，React Native并没有提供任何官方支持。也有许多第三方库如Appium或Detox可以用来测试React Native应用。

        相反的，Flutter在模块化、Widget和集成方面提供了丰富的测试功能，有着出色的应用测试文档。

        React Native于2015年推出，自那以后一直在不断增长的受欢迎度。该框架在GitHub上拥有庞大的开发者社区，以及世界各地举行的众多聚会和会议。

        Flutter发布滞后两年，但是已经受到了很多关注。特别是由于Google的推广。Flutter社区虽然比React Native小，但是如今他在快速增长，并且也在组织许多会议或聚会。

        React Native没有针对设置持续交付的官方文档。然而你可以在网上找到许多这一主题的文章。因此，你可以通过Azure DevOps了解如何构建React Native应用的持续交付流水线。Flutter框架有一个关于持续集成的部分，其中包含指向外部资源的链接。Flutter丰富的命令行界面使得设置持续交付十分容易。因此，Flutter的应用程序配置这些服务非常轻松，而React Native对此并没有提供官方的指导。

        得益于Google的努力Flutter应用的发布非常简单，他更主动自动化和灵活性能。而在使用React Native时，你将不得不处理手动操作和复杂的协议。

        选择一款框架时性能极其重要，在这方面Flutter完胜。这个框架加快了代码编写的速度，同时其C++引擎和Skia图形库使你能够为所有平台创建高性能的应用程序。

        为了在JavaScript和原生代码之间交互，React Native使用的一个Bridge。有时候这取决于UI的渲染并且会导致其他性能问题。因为Flutter通过内置的库与框架与原生元素交互，它并不需要这一机制。

        至于文档，Flutter也是胜者。得益于优秀的文档，Flutter对于新手来说入门非常容易。而React Native的文档更加复杂，并且假设用户已经有了Javascript开发经验。

        Flutter和React Native都是优秀的构建跨平台应用框架。虽然他们之间有许多相似点，但是在你决定选择一个之前你需要意识到他们之间显著的不同。事实上，这两个工具都是现代化的、非常流行的，可以用于高端的跨平台项目。 为了决定最合适的选择，你应该彻底分析项目需求，权衡利弊。      

勘误：React Native已经发布稳定版本，详情请见这里 ↩